<template>
  <div class="comment">
    <van-field
      class="my-field"
      v-model="content"
      rows="2"
      autosize
      label="发表评论"
      type="textarea"
      maxlength="50"
      placeholder="请输入bb的内容"
      show-word-limit
    >
    </van-field>
    <van-button
      type="primary"
      block
      @click="postComment"
    >提交评论</van-button>
    <van-card
      v-for="comment in list"
      :desc="comment.content"
      :key="comment.id"
    >
      <template
        #thumb
        click="false"
      >
        <div class="icon-box">
          <van-icon name="contact" />
        </div>
        <div>svip{{comment.user_name}}</div>
      </template>
      <template #title>
        <van-rate
          v-model="comment.rate"
          readonly
        />
      </template>
      <template #price>
        <div>
          {{comment.add_time}}
        </div>
      </template>
    </van-card>
    <div
      class="van-list__finished-text"
      @click="more"
    >{{moreText}}</div>
  </div>
</template>
<script>
export default {
  props: ['id'],
  data: () => ({
    content: '',
    value: 1,
    pageNo: 1,
    pageSize: 6,
    list: [],
    hasmore: false
  }),
  methods: {
    async getComments() {
      if (this.hasmore !== false) return
      ++this.pageNo
      const res = await this.$http.getComments({ id: this.id, pageNo: this.pageNo, pageSize: this.pageSize })
      this.list = this.list.concat(res.message)
      this.hasmore = this.pageNo * this.pageSize > res.count
    },
    more() {
      this.getComments()
    },
    async postComment() {
      await this.$http.postComment({ id: this.id, content: this.content })
      this.list.unshift({
        user_name: '匿名用户',
        add_time: new Date().getTime(),
        content: this.content,
        rate: 5
      })
      this.content = ''
    }
  },
  created() {
    this.getComments()
  },
  computed: {
    moreText() {
      return this.hasmore ? '被掏空了' : '加载更多...'
    }
  }
}
</script>
<style lang="scss" scoped>
.comment {
  .my-field {
    border: 1px solid #eee;
    margin: 10px 0;
    .van-cell__title span {
      font-size: 16px;
      font-weight: 600;
    }
  }
  .icon-box {
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 30px;
    border-radius: 50%;
    border: 1px solid #eee;
    text-align: center;
    padding: 4px;
  }
  .van-card__thumb {
    height: 55px;
  }
  .van-card__content {
    min-height: 55px;
  }
}
</style>
